<template>
  <div>
    <div>
      <el-form size="medium">
        <el-form-item label="区域">
          <el-radio v-model="area"
                    @change="areaChange"
                    label=1>全国</el-radio>
          <el-radio v-model="area"
                    label=2>&nbsp;</el-radio>
          <el-select v-model="cityIds"
                     multiple
                     filterable
                     collapse-tags
                     placeholder="试试搜索"
                     :disabled="area === '1'"
                     @change="getProductList">
            <el-option-group v-for="group in cityList"
                             :key="group.id"
                             :value="group.id"
                             :label="group.cityname">
              <el-option v-for="item in group.children"
                         :key="item.id"
                         :label="item.cityname"
                         :value="item.id">
              </el-option>
            </el-option-group>
          </el-select>
        </el-form-item>
        <el-form :inline="true">
          <el-form-item label="最多首付金额">
            <el-input v-model.number="downpayAmount"
                      placeholder="单位(元)"></el-input>
          </el-form-item>
          <el-form-item label="最多月供">
            <el-input v-model.number="monthlyPay"
                      placeholder="单位(元)"></el-input>
          </el-form-item>
          <el-form-item label="爆款状态">
            <el-select v-model="hotStatus"
                       placeholder="请选择">
              <el-option label="爆款"
                         value=1></el-option>
              <el-option label="一般"
                         value=0></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发布状态">
            <el-select v-model="productStatus"
                       placeholder="请选择">
              <el-option label="发布"
                         value='0'></el-option>
              <el-option label="下架"
                         value='1'></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-form :inline="true">
          <el-form-item label="总期数">
            <el-checkbox-group v-model="periodList">
              <el-checkbox label=24>24期</el-checkbox>
              <el-checkbox label=36>36期</el-checkbox>
              <el-checkbox label=48>48期</el-checkbox>
              <el-checkbox label=60>60期</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="金融产品公司名称">
            <el-select v-model="supplierId"
                       filterable
                       placeholder="请选择金融产品公司"
                       @change="getproductNameList(supplierId)">
              <el-option v-for="item in companyList"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item size="large">
            <el-button type="primary"
                       @click="getProductList">查询</el-button>
            <el-button type="primary"
                       @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-form>
      <div class="button-area">
        <el-button @click="setHot()"
                   type="primary"
                   size="small">设置爆款</el-button>
        <el-button @click="cancelHot()"
                   type="primary"
                   size="small">取消爆款</el-button>
        <el-button @click="() => {this.$router.push({ path: '/product/presentProduct/new' })}"
                   type="primary"
                   size="small">新增</el-button>
      </div>
      <el-table ref="multipleTable"
                border
                stripe
                :data="productList"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection"
                         width="40">
        </el-table-column>
        <el-table-column prop="productName"
                         label="方案名称"></el-table-column>
        <el-table-column prop="modelName"
                         label="车型"></el-table-column>
        <el-table-column prop="downpayAmount"
                         label="首付金额"></el-table-column>
        <el-table-column width="70"
                         prop="period"
                         label="总期数"></el-table-column>
        <el-table-column prop="monthlyPay"
                         label="月供"></el-table-column>
        <el-table-column prop="cityName"
                         label="区域"></el-table-column>
        <el-table-column prop="createdTime"
                         label="发布时间"></el-table-column>
        <el-table-column prop="homePageName"
                         label="爆款"></el-table-column>
        <el-table-column width="70"
                         prop="statusName"
                         label="状态"></el-table-column>
        <el-table-column width="160"
                         label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status == 0"
                       @click="undercarriage(scope.row.productId)"
                       style="margin-left: 10px;"
                       size="mini">下架</el-button>
            <template v-else>
              <el-button @click="upcarriage(scope.row.productId)"
                         style="margin-left: 10px;"
                         size="mini">上架</el-button>
              <el-button @click="modify(scope.row.productId)"
                         size="mini">修改</el-button>
            </template>
            <el-button @click="deleteProduct(scope.row.productId)"
                       type="danger"
                       size="mini">删除</el-button>
            <el-button @click="gotoDetail(scope.row.productId)"
                       type="info"
                       size="mini">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-foot">
        <el-button @click="batchUndercarriage()"
                   type="primary"
                   size="small">批量下架</el-button>
        <el-button @click="batchDeleteProduct()"
                   type="primary"
                   size="small">批量删除</el-button>
      </div>
    </div>
    <view-page :current-page="currentPage"
               :total="total"
               @change="pageChange"></view-page>
  </div>
</template>

<script>
import { packageImgList } from '@/utils/imgPackage'
import { vListLength } from '@/utils/validate'
import '@/style/info.scss'
import '@/style/common.scss'
import viewPage from '@/components/pagination'
import { api } from '@/api'
import { HTTPSUCCESS, HTTPDATAFAIL, HTTPPARAMFAIL, HTTPUNKOWNFAIL } from '@/components/constant'
import { devBaseURL } from '@/utils/http'

export default {
  data() {
    return {
      isInfo: false,
      uploadFlag: false,
      productStatus: this.$route.params.status,
      hotStatus: null,
      currentPage: 1,
      total: 100,
      cityIds: [],
      supplierId: null,
      area: null,
      downpayAmount: null,
      monthlyPay: null,
      periodList: [],
      companyList: [],
      productList: [],
      cityList: [],
      productPicUrlList: [],
      productPicNameList: [],
      uploadAction: devBaseURL + 'sys/product/upload',
      uploadData: null
    }
  },
  activated() {
    this.getCityList()
    this.getCompanyList()
    this.getProductList()
  },
  components: { viewPage },
  methods: {
    vListLength,
    modify(productId) {
      this.$router.push({
        name: 'modifyPresentProduct',
        params: {
          productId: productId
        }
      })
    },
    reset() {
      this.area = null
      this.cityIds = []
      this.downpayAmount = null
      this.monthlyPay = null
      this.productStatus = null
      this.hotStatus = null
      this.supplierId = null
      this.periodList = []
      this.getProductList()
    },
    getCompanyList() {
      this.$http.get(api.SYS_SUPPLIER_ALL).then(
        res => {
          this.companyList = res.data
        }
      )
    },
    getproductNameList(id) {
      this.$http._get(api.SYS_PRODUCT_SUPPLIER, id).then(
        res => {
          this.productNameList = res.data
        }
      )
    },
    getCityList() {
      this.$http.get(api.SYS_CITY_CITYS).then(
        res => {
          this.cityList = res.data
        }
      )
    },
    getProductList() {
      let cities
      if (this.area === '1') {
        cities = [1]
      } else {
        cities = this.cityIds
      }
      console.log(this.productStatus)
      const params = {
        pageNum: this.currentPage,
        pageSize: 10,
        businessType: 3,
        cityIds: cities,
        downpayAmount: this.downpayAmount,
        monthlyPay: this.monthlyPay,
        hotStatus: this.hotStatus,
        productStatus: this.productStatus,
        periods: !vListLength(this.periodList) ? this.periodList : null,
        supplierId: this.supplierId
      }
      this.$http.post(api.SYS_PRODUCT_PRODUCTS, params).then(
        res => {
          if (res.code === HTTPSUCCESS) {
            this.productList = res.data.loanproductList
            this.currentPage = res.data.pageNum
            this.total = res.data.totalSize
          } else {
            this.$msg._message('查询失败 请联系系统管理员', 'error')
          }
        }
      )
    },
    upcarriage(id) {
      const params = {
        productIds: [id],
        status: 0
      }
      this.$http.post(api.SYS_PRODUCT_MODIFYSTATUS, params).then(
        res => {
          if (res.code === HTTPSUCCESS) {
            this.$msg._message('上架成功', 'success')
            this.getProductList()
          } else {
            this.$msg._message('上架失败 请联系系统管理员', 'error')
          }
        }
      )
    },
    undercarriage(id) {
      const params = {
        productIds: [id],
        status: 1
      }
      this.$http.post(api.SYS_PRODUCT_MODIFYSTATUS, params).then(
        res => {
          if (res.code === HTTPSUCCESS) {
            this.$msg._message('下架成功', 'success')
            this.getProductList()
          } else {
            this.$msg._message('下架失败 请联系系统管理员', 'error')
          }
        }
      )
    },
    deleteProduct(id) {
      const params = {
        productIds: [id]
      }
      this.$http.post(api.SYS_PRODUCT_DEL, params).then(
        res => {
          if (res.code === HTTPSUCCESS) {
            this.$msg._message('删除产品成功', 'success')
            this.getProductList()
          } else {
            this.$msg._message('删除产品失败 请联系系统管理员', 'error')
          }
        }
      )
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    batchUndercarriage() {
      const params = {
        productIds: this.rebuildSelectList(),
        status: 1
      }
      this.$http.post(api.SYS_PRODUCT_MODIFYSTATUS, params).then(
        res => {
          if (res.code === HTTPSUCCESS) {
            this.$msg._message('批量下架成功', 'success')
            this.getProductList()
          } else {
            this.$msg._message('批量下架失败 请联系系统管理员', 'error')
          }
        }
      )
    },
    batchDeleteProduct() {
      const params = {
        productIds: this.rebuildSelectList()
      }
      this.$http.post(api.SYS_PRODUCT_DEL, params).then(
        res => {
          if (res.code === HTTPSUCCESS) {
            this.$msg._message('批量删除产品成功', 'success')
            this.getProductList()
          } else {
            this.$msg._message('批量删除产品失败 请联系系统管理员', 'error')
          }
        }
      )
    },
    setHot() {
      let cities
      if (this.area === '1') {
        cities = [1]
      } else {
        cities = this.cityIds
      }
      if (vListLength(cities)) return this.$msg._message('请先选择城市', 'warning')
      const params = {
        productIds: this.rebuildSelectList(),
        homePage: 1,
        cityIds: cities
      }
      this.$http.post(api.SYS_PRODUCT_MODIFYHOMEPAGE, params).then(
        res => {
          if (res.code === HTTPSUCCESS) {
            this.$msg._message('设置爆款成功', 'success')
            this.getProductList()
          } else {
            this.$msg._message('设置爆款失败 请联系系统管理员', 'error')
          }
        }
      )
    },
    cancelHot() {
      let cities
      if (this.area === '1') {
        cities = [1]
      } else {
        cities = this.cityIds
      }
      if (vListLength(cities)) return this.$msg._message('请先选择城市', 'warning')
      const params = {
        productIds: this.rebuildSelectList(),
        homePage: 0,
        cityIds: cities
      }
      this.$http.post(api.SYS_PRODUCT_MODIFYHOMEPAGE, params).then(
        res => {
          if (res.code === HTTPSUCCESS) {
            this.$msg._message('设置爆款成功', 'success')
            this.getProductList()
          } else {
            this.$msg._message('设置爆款失败 请联系系统管理员', 'error')
          }
        }
      )
    },
    rebuildSelectList() {
      if (this.multipleSelection) {
        const idList = []
        this.multipleSelection.forEach(element => {
          idList.push(element.productId)
        })
        return idList
      }
      return []
    },
    pageChange(page) {
      this.currentPage = page
      this.getProductList()
    },
    gotoDetail(id) {
      this.$router.push({
        name: 'presentDetail',
        params: {
          productId: id
        }
      })
    },
    areaChange() {
      this.getProductList()
    }
  }
}
</script>

